<template>
	<view class="app-components-load-more">
		<view class="app-components-load-more__loading e-flex-xy-center" v-if="showLoad">
			<view class="app-components-load-more__loading-box ">
				<view class="app-components-load-more__loading-box__view" :style="bgColor"></view>
				<view class="app-components-load-more__loading-box__view" :style="bgColor"></view>
				<view class="app-components-load-more__loading-box__view" :style="bgColor"></view>
			</view>
		</view>
		<slot v-else>
			<view class="app-components-load-more__text">
				<text class="e-font-24 c-secondary">{{ $t(endText) }}</text>
			</view>
		</slot>
	</view>
</template>

<script lang="ts">
export default {
	name: 'load-more',
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
	options: {
		virtualHost: true
	}
	// #endif
};
</script>

<script setup lang="ts">
	import {computed} from 'vue'
	// #ifdef APP
	import { useInit } from '@/common/stores';
	import { storeToRefs } from 'pinia';
	// #endif
	
	const props = defineProps({
		showLoad: Boolean,
		endText: {
			type: String,
			default: 'common.都被你看光啦'
		}
	})
	// #ifdef APP
	const { AppSkin } = storeToRefs(useInit());
	// #endif
	const bgColor = computed(() => {
		// #ifdef APP
		return {
			backgroundColor: AppSkin.value.primary
		}
		// #endif
	})
</script>

<style lang="scss" scoped>
@use 'sass:math';
@include appBem_b(components-load-more) {
	@include appBem_e(loading) {
		height: 80rpx;
		
		&-box {
			// 代码来自epic-spinners库，对uniapp进行了适配，https://epic-spinners.epicmax.co/
			width: 80rpx;
			height: 20rpx;
			position: relative;
			&__view {
				height: 20rpx;
				width: 20rpx;
				left: 80rpx;
				position: absolute;
				border-radius: 4rpx;
				transform: translateY(0) rotate(45deg) scale(0);
				// #ifndef APP-NVUE 
				background-color: var(--color-primary);
				animation: loading 2.5s linear infinite;
				@for $i from 1 to 4 {
					&:nth-child(#{$i}) {
						animation-delay: math.div(2500 * $i, -1.5) + ms;
					}
				}
				// #endif
			}
			// #ifndef APP-NVUE 
			@keyframes loading {
				0% {
					transform: translateX(0) rotate(45deg) scale(0);
				}
				50% {
					transform: translateX(-233%) rotate(45deg) scale(1);
				}
				100% {
					transform: translateX(-466%) rotate(45deg) scale(0);
				}
			}
			// #endif
		}
		
	}
	@include appBem_e(text) {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
}
</style>
